<template>
    <Layout :tab-name=0>
<!--        <ModalPage/>-->
        <!-- Start Slider Area -->
        <div class="demo-slider-area slider-area bg-transparent slider-style-1">
            <div class="header">
                <div class="container">
                    <div class="row">
                        <MyOwl/>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Slider Area -->

        <Separator/>

        <!-- Start Our Demo -->
        <div class="rn-demo-area rn-section-gap" id="demo">
            <div class="wrapper plr--150 plr_lg--30 plr_md--30 plr_sm--30">
                <div class="row">
                    <div class="col-lg-12">
                        <SectionTitle
                            text-align="center"
                            subtitle="Functions List"
                            title="功能列表"
                            description="掌握国土资源利用和土地覆盖类型，是地理国情普查与监测的重要内容"
                            data-aos="fade-up"
                        />
                    </div>
                </div>
                <div class="row row--15">
                    <div class="col-lg-3 col-md-6 col-12 mt--40"
                         v-for="(page, index) in demoPages"
                         :key="index"
                         data-aos="fade-up"
                         :data-aos-delay="100 + index">
                        <div class="single-demo">
                            <router-link :to="page.url">
                                <div class="thumbnail">
                                    <img class="image-dark" :src="page.image" alt="Corporate images"/>
                                    <img class="image-light" :src="page.imageLight" alt="Corporate images"/>
                                    <span v-if="page.badge" class="label-badge">{{ page.badge }}</span>
                                </div>
                            </router-link>
                            <h4 class="title">
                                <router-link :to="page.url">{{ page.title }}</router-link>
                            </h4>
                        </div>
                    </div>
                </div>
                <Separator/>
                <section class="rn-service-area rn-section-gap">
                    <div class="container">
                        <div class="row row--30">
                            <div class="col-lg-12">
                                <SectionTitle
                                        class="mb--50"
                                        text-align="center"
                                        subtitle="Statics of Models"
                                        title="模型表现"
                                        data-aos="fade-up"
                                        data-aos-delay="60"
                                />
                            </div>
                        </div>
                        <Counter
                                text-align="center"
                                :counter-data="counterOneData"
                                column="col-lg-3 col-md-6 col-sm-6 col-12"
                        />
                    </div>
                </section>

                <Separator/>
                <section class="rn-service-area rn-section-gap">
                    <div class="container">
                        <div class="row row--30">
                            <div class="col-lg-12">
                                <SectionTitle
                                        class="mb--50"
                                        text-align="center"
                                        subtitle="Advantages of Product"
                                        title="产品优势"
                                        description="相对于传统基于人海战术的目视解译方法<br/>基于深度学习的方法可以自动分析图像中的地物类型，在准确率和效率方面展现出极大的潜力"
                                        data-aos="fade-up"
                                        data-aos-delay="60"
                                />
                            </div>
                        </div>
                        <ServiceOne
                                service-style="service__style--1 bg-color-blackest radius mt--25"
                                icon-size="62"
                                text-align="center"
                        />
                    </div>
                </section>

            </div>
        </div>
        <!-- End Our Demo -->

    </Layout>
</template>

<script>
    import Layout from '../components/common/Layout'
    import Icon from '../components/icon/Icon'
    import Separator from '../components/elements/separator/Separator'
    import SectionTitle from '../components/elements/sectionTitle/SectionTitle'
    import MyOwl from "../components/elements/myowl/MyOwl";
    import Counter from "../components/elements/counterUp/Counter";
    import ServiceOne from "../components/elements/service/ServiceOne";

    export default {
        name: 'Demo',
        components: {ServiceOne, MyOwl, Icon, Layout, Separator, SectionTitle,Counter},
        data() {
            return {
                counterOneData: [
                    {
                        number: 74,
                        title: '目标提取F1',
                    },
                    {
                        number: 86,
                        title: '变化检测F1',
                    },
                    {
                        number: 88.56,
                        title: '目标检测bbBox mAP',
                    },
                    {
                        number: 65,
                        title: '地物分类平均F1',
                    }
                ],
                demoPages: [
                    {
                        url: '/objectExtraction',
                        image: require('@/assets/images/demo/ObjectExtraction.png'),
                        imageLight: require('@/assets/images/demo/ObjectExtraction.png'),
                        title: '目标提取',
                        badge: '',
                    },
                    {
                        url: '/changeDetection',
                        image: require('@/assets/images/demo/ChangeDetection.png'),
                        imageLight: require('@/assets/images/demo/ChangeDetection.png'),
                        title: '变化检测',
                        badge: '',
                    },
                    {
                        url: '/objectDetection',
                        image: require('@/assets/images/demo/ObjectDetection.png'),
                        imageLight: require('@/assets/images/demo/ObjectDetection.png'),
                        title: '目标检测',
                        badge: '',
                    },
                    {
                        url: '/TerrainClassification',
                        image: require('@/assets/images/demo/TerrainClassification.jpg'),
                        imageLight: require('@/assets/images/demo/TerrainClassification.jpg'),
                        title: '地物分类',
                        badge: '',
                    }
                ],
			}
        }
    }
</script>

<style>
    .header{
        background:url(../assets/images/home/banner.jpg) no-repeat 0px 0px;
        background-size: cover;
        min-height: 790px;
    }
</style>